<template>
    <Layout class="menu-left">
        <Form ref="queryForm" :model="dataToQuery" style="margin-top: 10px;" :label-width="120">
            <Row class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                    :currentOrgId="dataToQuery.companyId"
                                    :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='设备型号：' prop='deviceTypeName'>
                        <Select v-model="dataToQuery.deviceTypeName" style="width:200px" @on-select="queryDevice">
                            <Option v-for="item in deviceTypeList" :value="item.deviceCollectionItemId" :key="item.deviceCollectionItemId">{{ item.deviceTypeName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='设备：' prop='deviceName'>
                        <Select v-model="dataToQuery.deviceName" style="width:200px" @on-select="selectDeviceName">>
                            <Option v-for="item in deviceList" :value="item.deviceInfoId" :key="item.deviceInfoId">{{ item.deviceName }}</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col span="24">
                    <Button @click="reset" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search"  @click="query">查询</Button>
                </Col> 
            </Row>
        </Form>
        <Row class="query-form">
            <Col span="24">
                <Button size="large" type="success" class="ivu-btn-add" icon="md-add" @click="insertDeviceData">新增</Button>
            </Col>
        </Row>
        <Table class="tableClass" border stripe style="margin-top:20px;overflow-y:auto;" size="small"
                height="400px" :loading="collectionLoading" :columns="deviceDataColumn" :data="deviceDatas">
        </Table>

        <Modal title="数据录入" :transfer=false v-model="dataInputVisible" :width=800>
            <Form label-position="top">
                 <Row type="flex" justify="start" class="code-row-bg">
                    <Col span="11" offset="1">
                        <FormItem label="时间" prop="dataTime">
                            <DatePicker  v-model="dataTime" format="yyyy-MM-dd hh:mm:ss" type="datetime" placement="bottom-end"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="11" offset="1" v-for="(item,index) in currentCollectionItemChilds">
                        <FormItem :label="item.itemName" prop="item.itemCode">
                            <Input type="text" v-model="item.itemVlaue"></Input>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button @click="submitDatas()" class="ivu-btn-save" :loading="buttonLoading">确定</Button>
                <Button @click="handleCancel" class="ivu-btn-cancel">取消</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import cascaderDom from "../../../components/cascader-dom.vue"
    import {sessionStorage} from '../../../common/cacheUtils.js';
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {
        Api
    } from '../../../api/index.js'
    export default {
        components: {
            cascaderDom
        },
        data() {
            return {
                ...this.createCommonDataField(),
                deviceInfoId:"",
                dataTime:"",
                collectionLoading:false,
                dataInputVisible:false,
                deviceDataColumn:[],
                deviceDatas:[],                
                codes:[],
                deviceTypeList:[],
                deviceList:[],
                deviceRealTimeDatas:[],
                currentCollectionItemChilds:[],
                lineHeight:300,
                buttonLoading:false
            }
        },
        mounted(){
            this.lineHeight = window.innerHeight - 120;
        },
        methods:{
            ...pageCommonFunction,
            query(){   
                this.$http.get(Api.queryDeviceCollectionItemChildByItemId+"/"+this.dataToQuery.deviceTypeName, {}).then(res => {
                    this.currentCollectionItemChilds = res.data.data.data;
                    this.deviceDataColumn = [];
                    this.currentCollectionItemChilds.forEach(item=>{
                        this.deviceDataColumn.push({
                            title: item.itemName,
                            minWidth: 250,
                            align: "center",
                            key: item.itemCode
                        })
                    })
                    this.deviceDataColumn.push({
                        title: '操作',
                        fixed: 'right',
                        align: 'center',
                        width: 100,
                        render: (h, params) => {
                            return h('div', [
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px'
                                    },
                                    on: {
                                        click: () => {
                                            this.modify(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Divider', {
                                    props: {
                                        type: 'vertical',
                                    }
                                }, ''),
                                h('A', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        fontSize: '14px',
                                        color: 'red'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '提示信息',
                                                content: '<p>删除该数据</p>',
                                                okText:'确认',
                                                cancelText:'取消',
                                                onOk: () => {
                                                    this.remove(params.row)
                                                }
                                            });
                                        }   
                                    }
                                }, '删除')
                            ]);
                        }
                    })
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            queryDeviceData(deviceInfoId){
                this.$http.get(Api.queryDeviceCollectionItemChildByItemId+"/"+deviceInfoId).then(res => {
                    this.deviceDatas = res.data.data.data;
                })
            },
            setQueryCompanyId(data) {
                this.$set(this.dataToQuery, 'companyId', data[data.length - 1])
                this.queryDeviceType(this.dataToQuery.companyId);
            },
            queryDeviceType(id){
                var companyId = sessionStorage('userId').getObject('userId').companyId;
                if(id != ""&&id!= undefined)
                    companyId = id;
                this.$http.get(Api.queryDeviceCollectionItemList+"?fromPage=1&pageSize=1000&orgId="+companyId).then(res => {
                    this.deviceTypeList = res.data.data.data;
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            queryDevice(id){
                 this.$http.get(Api.queryDeviceByItemId+"/"+id.value).then(res => {
                    this.deviceList = res.data.data.data;
                }).catch(e => {
                    this.$Message.error('请求失败');
                })
            },
            insertDeviceData(){
                this.dataInputVisible = true;
            },
            selectDeviceName(id){
                this.deviceInfoId = id;
            },
            modify(row){

            },
            remove(row){

            },
            handleCancel(){
                this.dataInputVisible = false;
            },
            submitDatas(){
                var json = {};
                this.currentCollectionItemChilds.forEach(item=>{
                    json[item.itemCode]  =  item.itemValue;
                })
                var resJson = {
                    time : Date.parse(this.dataTime),
                    value: JSON.stringify(json)
                }
                var data = {
                    dataTime: this.dataTime,
                    deviceInfoId : this.currentDeviceInfoId,
                    data: JSON.stringify(resJson)
                }
                this.$http.post(Api.insertOrUpdateDeviceData + "/" + this.deviceInfoId, data).then((res) => {
                    this.submitCollectionItemChild( this.form1datacopy.deviceCollectionItemId);
                    this.$Message.success("保存成功")
                    this.dataInputVisible = false;
                    this.query();
                    this.buttonLoading = false;
                }).catch(e => {
                    this.model1 = false;
                    this.query();
                    this.$Message.error("数据获取失败")
                })
            },
        }
    }

</script>